<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01.构造器的说明</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class Dog extends React.Component {
        // 1. 类式组件中的构造器完全可以不写
        // 2. 如果写构造器，必须调用 super(),否则报错
        // 3. React会在组件挂载之前执行组件实例对象的构造器，并为构造器传入组件实例标签上的属性 props
        // 4. 如果未向 super() 传入 props，则在构造器中通过 this 调用 props 会报 undefined
        constructor(props) {
          super(props);
          console.log("props：", props);
          console.log("this.props:", this.props);
        }
        render() {
          const { name, age } = this.props;
          return (
            <h3>
              这里是{name},我{age}岁了
            </h3>
          );
        }
      }

      ReactDOM.render(
        <Dog name="旺财" age="5" />,
        document.querySelector("#app")
      );
    </script>
  </body>
</html>
